<template>
    <div id="Observe">
        <el-breadcrumb separator="/" style="padding-left:10px;padding-bottom:10px;font-size:12px;">
            <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>接种管理</el-breadcrumb-item>
            <el-breadcrumb-item>留观记录</el-breadcrumb-item>
        </el-breadcrumb>
        <!-- 留观记录卡片区 -->
        <el-card class="box-card">
            <el-form :inline="true" :model="queryMap">
                <!-- 输入框 -->
                <el-input clearable @clear="searchAll"
                            style="width: 250px;margin-left: 10px;margin-right:10px"
                            type="text"
                            v-model="queryMap.realName"
                            @keydown.enter.native="searchByName"
                            placeholder="输入接种人名称模糊搜索..."
                            prefix-icon="el-icon-search"></el-input>
                <el-form-item label="预约时间" label-width="80px">
                    <el-date-picker
                    v-model="queryMap.reservationDate"
                    align="right"
                    type="date"
                    @change="search"
                    placeholder="选择日期"
                    style="width:160px;">
                    </el-date-picker>
                </el-form-item>
                <el-button type="primary" icon="el-icon-search" size="small"  @click="searchAll">搜索全部</el-button>
                <!-- 高级搜索按钮 -->
                <!-- <el-button type="primary" size="small" @click="clickAdvanceSearchBtn">
                    <i class="el-icon-info" style="margin-right: 5px" aria-hidden="true"></i>高级搜索</el-button> -->
                <!-- 搜索条件 -->
                <el-dialog title="高级搜索预约信息" width="75%"  @close="closeAdvanceSearchDialog" :visible.sync="showAdvanceSearch" >
                    <span slot="footer" class="dialog-footer">
                        <el-button style="margin-right:30px;width:150px;" @click="showAdvanceSearch = false">取 消</el-button>
                        <el-button
                                type="primary"
                                @click="searchByConditions"
                                style="width:150px;margin-right:40px;"
                                :loading="btnLoading"
                                :disabled="btnDisabled"
                        >确 定</el-button>
                    </span>
                </el-dialog>
            </el-form>

            <!-- 表格区域 -->
            <template>
                <el-table
                        border
                        size="mini"
                        v-loading="loading"
                        stripe
                        :header-cell-style="{textAlign: 'center'}"
                        :cell-style="{ textAlign: 'center' }"
                        :data="observesData"
                        style="width: 100%;"
                        height="470"
                >
                    <el-table-column type="index" fixed="left" label="序号" width="50"></el-table-column>
                    <el-table-column prop="realName" fixed="left" label="接种人名称" width="115"></el-table-column>
                    <el-table-column prop="sex" fixed="left" label="性别" width="60">
                        <template slot-scope="scope">
                            <el-tag size="small" type="primary" v-if="scope.row.sex===1">男</el-tag>
                            <el-tag size="small"  type="warning" v-else>女</el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column prop="allergy" label="过敏史" width="60">
                        <template slot-scope="scope">
                            <el-tag size="small" effect="dark" type="danger" v-if="scope.row.allergy === true">有</el-tag>
                            <el-tag size="small" effect="dark" type="primary" v-else>无</el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column prop="health" label="身体健康" width="75">
                        <template slot-scope="scope">
                            <el-tag size="small" type="primary" v-if="scope.row.health === true">健康</el-tag>
                            <el-tag size="small"  effect="dark"  type="danger" v-else>亚健康</el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column prop="accountTime" label="接种日期" width="150" sortable></el-table-column>
                    <el-table-column prop="health" label="接种状态" width="110">
                        <template slot-scope="scope">
                            <el-tag size="small" effect="dark" type="danger" v-if="scope.row.states===0">预约未受理</el-tag>
                            <el-tag size="small" type="primary" v-if="scope.row.states===1">已受理</el-tag>
                            <el-tag size="small" type="success" v-else-if="scope.row.states===2">接种待留观</el-tag>
                            <el-tag size="small" effect="dark" type="danger" v-else-if="scope.row.states=== -1">预约过期</el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column prop="vaccSite" label="接种部位" width="100"></el-table-column>
                    <el-table-column prop="vaccineName" label="接种疫苗名称" width="150"></el-table-column>
                    <el-table-column prop="vaccAmount" label="注射第几针" width="105" sortable>
                        <template slot-scope="scope">
                            <el-tag size="small" effect="dark" type="success">{{scope.row.vaccAmount}}</el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column prop="vaccDegree" label="疫苗等级" width="70">
                        <template slot-scope="scope">
                            <el-tag size="small" effect="plain" v-if="scope.row.vaccDegree == 1" type="success">甲类</el-tag>
                            <el-tag size="small" effect="plain" v-else-if="scope.row.vaccDegree == 2" type="success">乙类</el-tag>
                            <el-tag size="small" effect="plain" v-else-if="scope.row.vaccDegree == 3" type="success">丙类</el-tag>
                            <el-tag size="small" effect="plain" v-else-if="scope.row.vaccDegree == 4" type="success">丁类</el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column prop="vaccineType" label="疫苗类别" width="120">
                        <template slot-scope="scope">
                            <div  v-for="vacctype in vaccineTypes" :key="vacctype.id" >
                                <el-tag size="small" v-if="scope.row.vaccineType == vacctype.id">{{vacctype.type}}</el-tag>
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column prop="supplierName" label="疫苗提供商" width="150"></el-table-column>
                    <el-table-column prop="vaccSiteName" label="接种点名称" width="160"></el-table-column>
                    <el-table-column prop="vaccSitePhone" label="接种点电话" width="120"></el-table-column>
                    <el-table-column prop="accountName" label="接种办理人" width="120"></el-table-column>
                    <el-table-column label="操作" fixed="right" width="180">
                        <template slot-scope="scope">
                            <el-button
                                    v-hasPermission="'observe:edit'"
                                    type="text"
                                    size="mini"
                                    icon="el-icon-view"
                                    @click="showRecord(scope.row.injectionId)"
                            >查看</el-button>
                            <el-button
                                    v-hasPermission="'observe:add'"
                                    style="margin-left:25px"
                                    type="text"
                                    size="mini"
                                    icon="el-icon-edit"
                                    @click="acceptRecord(scope.row.injectionId)"
                            >留观记录</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </template>

            <!-- 分页 -->
            <el-pagination
                    style="margin-top:10px;"
                    background
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="this.queryMap.pageNum"
                    :page-sizes="[ 10, 15, 20, 30]"
                    :page-size="this.queryMap.pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total"
            ></el-pagination>


            <!-- 查看接种信息 -->
            <el-dialog :title="showTitle" :visible.sync="showDialogVisible" width="70%"  @close="closeshowDialog">
                <span>
                    <el-form
                            :model="showForm"
                            label-width="80px"
                            class="demo-ruleForm"
                    >
                        <el-row>
                            <el-col :span="6">
                                <el-form-item label="接种人名称" label-width="85px">
                                    <el-input v-model="showForm.realName" style="width:170px;" disabled placeholder="输入预约人名称查询"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="6">
                                <el-form-item label="接种疫苗" label-width="80px">
                                    <el-input v-model="showForm.vaccineName" disabled style="width:170px;" placeholder="输入疫苗名称查询"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="7" style="width:27.2%">
                                <el-form-item label="接种点名称" label-width="85px">
                                    <el-input v-model="showForm.vaccSiteName" style="width:190px;" disabled placeholder="输入接种点名称查询"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="5">
                                <el-form-item label="接种点电话" label-width="85px">
                                    <el-input v-model="showForm.vaccSitePhone" style="width:147px;" disabled placeholder="输入接种点名称查询"></el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <!-- 第二行 -->
                        <el-row style="margin-top:10px">
                            <el-col :span="6">
                                <el-form-item label="疫苗等级" label-width="85px">
                                    <el-select
                                            disabled
                                            style="width:170px;"
                                            v-model="showForm.vaccDegree"
                                            placeholder="请选择等级"
                                    >
                                        <el-option
                                                v-for="degree in vaccDeg"
                                                :label="degree.label"
                                                :key="degree.id"
                                                :value="degree.id"
                                        >
                                            <span style=" color: #000; font-size: 13px">
                                                <el-tag size="small" style="margin-left:10px;width:60px;text-align:center;"  effect="dark" type="primary">
                                                {{ degree.label }}
                                                </el-tag>
                                                疫苗
                                            </span>
                                        </el-option>
                                    </el-select>
                                </el-form-item>
                            </el-col>
                            <el-col :span="6">
                                <el-form-item label="疫苗类别" label-width="80px" >
                                    <el-select
                                            disabled
                                            style=" width:170px;"
                                            v-model="showForm.vaccineType"
                                    >
                                        <el-option
                                            v-for="vaccType in vaccineTypes"
                                            :label="vaccType.type"
                                            :key="vaccType.id"
                                            :value="vaccType.id"
                                        >
                                            <span style="margin-left:10px; color: #ED2C2A;">
                                                <el-tag size="small" style="width:100px;text-align:center;"  effect="dark" type="primary">
                                                {{ vaccType.type }}
                                                </el-tag>
                                            </span>
                                        </el-option>
                                    </el-select>
                                </el-form-item>
                            </el-col>
                            <el-col :span="6">
                                <el-form-item label="疫苗提供商" label-width="85px">
                                    <el-input v-model="showForm.supplierName" style="width:190px;" disabled ></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="6">
                                <el-form-item label="疫苗总针数：" label-width="150px">
                                    <el-tag size="small" style="margin-top:10px;line-height:25px;font-size:14px" effect="dark"  type="success">{{showForm.vaccAmount}}</el-tag>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row style="margin-top:10px">
                            <el-col :span="8">
                                <div class="grid-content bg-purple-light">
                                    <el-form-item label="接种人性别" label-width="130px">
                                        <el-radio-group style="margin-left:10px" v-model="showForm.sex">
                                        <el-radio disabled :label="1">男</el-radio>
                                        <el-radio disabled :label="0">女</el-radio>
                                        </el-radio-group>
                                    </el-form-item>
                                </div>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item label="接种人是否有过敏史" label-width="150px">
                                    <el-radio-group v-model="showForm.allergy">
                                        <el-radio disabled :label="true">有</el-radio>
                                        <el-radio disabled :label="false">无</el-radio>
                                    </el-radio-group>
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item label="接种人身体状况" label-width="120px">
                                    <el-radio-group  v-model="showForm.health">
                                        <el-radio disabled :label="true">健康</el-radio>
                                        <el-radio disabled :label="false">亚健康</el-radio>
                                    </el-radio-group>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row style="margin-top:10px">
                            <el-col :span="6">
                                <el-form-item label="注射针数：" label-width="130px">
                                    <!-- <el-input v-model="showForm.vaccAmount" style="width:170px;" disabled ></el-input> -->
                                    <span style="margin-left:5px;font-size:17px;font-weight: bold;">第</span> 
                                            <el-tag size="small" style="margin-left:8px;line-height:25px;font-size:14px" effect="dark"  type="danger">{{showForm.vaccAmount}}</el-tag>
                                        <span style="margin-left:10px;font-size:17px;font-weight: bold;">针</span>
                                </el-form-item>
                            </el-col>
                            <el-col :span="6">
                                <el-form-item label="接种时间" label-width="80px">
                                    <el-input v-model="showForm.accountTime" style="width:170px;" disabled ></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="6">
                                <el-form-item label="接种部位" label-width="80px">
                                    <el-input v-model="showForm.vaccSite" style="width:165px;" disabled></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="6">
                                <el-form-item label="接种办理人" label-width="90px">
                                    <el-input v-model="showForm.accountName" style="width:160px;" disabled></el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row style="margin-top:10px">
                            <el-col :span="9">
                                <el-form-item label="接种人区域" label-width="90px">
                                    <el-input v-model="showForm.vaccinatorArea" style="width:295px;" disabled></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="9">
                                <el-form-item label="接种人地址" label-width="110px">
                                    <el-input v-model="showForm.vaccinatorAddress" style="width:270px;" disabled></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="6">
                                <el-form-item label="接种人电话" label-width="90px">
                                    <el-input v-model="showForm.vaccinatorPhone" style="width:160px;" disabled></el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>
                    </el-form>
                </span>
                <span slot="footer" style="text-align:center;" class="dialog-footer">
                    <el-button @click="showDialogVisible = false" style="margin-right:50px;width:180px">取 消</el-button>
                </span>
            </el-dialog>

            <!-- 添加新的留观记录 -->
            <el-dialog :title="showTitle" :visible.sync="addDialogVisible" width="71%"  @close="closeAddDialog">
                <span>
                    <el-form
                            :model="addForm"
                            label-width="80px"
                            :rules="addFormRules"
                            ref="addFormRef"
                            class="demo-ruleForm"
                    >
                        <div class="addStyle">
                            <el-row>
                                <el-col :span="6">
                                    <el-form-item label="接种人名称" label-width="85px">
                                        <el-input v-model="addForm.realName" style="width:170px;" disabled placeholder="输入预约人名称查询"></el-input>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="6">
                                    <el-form-item label="接种疫苗" label-width="80px">
                                        <el-input v-model="addForm.vaccineName" disabled style="width:170px;" placeholder="输入疫苗名称查询"></el-input>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="7" style="width:27.2%">
                                    <el-form-item label="接种点名称" label-width="85px">
                                        <el-input v-model="addForm.vaccSiteName" style="width:190px;" disabled placeholder="输入接种点名称查询"></el-input>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="5">
                                    <el-form-item label="接种点电话" label-width="85px">
                                        <el-input v-model="addForm.vaccSitePhone" style="width:147px;" disabled placeholder="输入接种点名称查询"></el-input>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                             <el-row style="margin-top:10px">
                                 <el-col :span="6">
                                    <el-form-item label="注射针数：" label-width="130px">
                                        <!-- <el-input v-model="showForm.vaccAmount" style="width:170px;" disabled ></el-input> -->
                                        <span style="margin-left:5px;font-size:17px;font-weight: bold;">第</span> 
                                                <el-tag size="small" style="margin-left:8px;line-height:25px;font-size:14px" effect="dark"  type="danger">{{addForm.vaccAmount}}</el-tag>
                                            <span style="margin-left:10px;font-size:17px;font-weight: bold;">针</span>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="6">
                                    <el-form-item label="疫苗等级" label-width="80px">
                                        <el-select
                                                disabled
                                                style="width:170px;"
                                                v-model="addForm.vaccDegree"
                                                placeholder="请选择等级"
                                        >
                                            <el-option
                                                    v-for="degree in vaccDeg"
                                                    :label="degree.label"
                                                    :key="degree.id"
                                                    :value="degree.id"
                                            >
                                                <span style=" color: #000; font-size: 13px">
                                                    <el-tag size="small" style="margin-left:10px;width:60px;text-align:center;"  effect="dark" type="primary">
                                                    {{ degree.label }}
                                                    </el-tag>
                                                    疫苗
                                                </span>
                                            </el-option>
                                        </el-select>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="6">
                                    <el-form-item label="疫苗类别" label-width="85px" >
                                        <el-select
                                                disabled
                                                style=" width:170px;"
                                                v-model="addForm.vaccineType"
                                        >
                                            <el-option
                                                v-for="vaccType in vaccineTypes"
                                                :label="vaccType.type"
                                                :key="vaccType.id"
                                                :value="vaccType.id"
                                            >
                                                <span style="margin-left:10px; color: #ED2C2A;">
                                                    <el-tag size="small" style="width:100px;text-align:center;"  effect="dark" type="primary">
                                                    {{ vaccType.type }}
                                                    </el-tag>
                                                </span>
                                            </el-option>
                                        </el-select>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="6">
                                    <el-form-item label="疫苗提供商" label-width="85px">
                                        <el-input v-model="addForm.supplierName" style="width:170px;" disabled ></el-input>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                            <el-row style="margin-top:10px">
                                <el-col :span="6">
                                    <el-form-item label="疫苗等级" label-width="85px">
                                        <el-select
                                                disabled
                                                style="width:170px;"
                                                v-model="addForm.vaccDegree"
                                                placeholder="请选择等级"
                                        >
                                            <el-option
                                                    v-for="degree in vaccDeg"
                                                    :label="degree.label"
                                                    :key="degree.id"
                                                    :value="degree.id"
                                            >
                                                <span style=" color: #000; font-size: 13px">
                                                    <el-tag size="small" style="margin-left:10px;width:60px;text-align:center;"  effect="dark" type="primary">
                                                    {{ degree.label }}
                                                    </el-tag>
                                                    疫苗
                                                </span>
                                            </el-option>
                                        </el-select>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="6">
                                    <el-form-item label="疫苗类别" label-width="80px" >
                                        <el-select
                                                disabled
                                                style=" width:170px;"
                                                v-model="addForm.vaccineType"
                                        >
                                            <el-option
                                                v-for="vaccType in vaccineTypes"
                                                :label="vaccType.type"
                                                :key="vaccType.id"
                                                :value="vaccType.id"
                                            >
                                                <span style="margin-left:10px; color: #ED2C2A;">
                                                    <el-tag size="small" style="width:100px;text-align:center;"  effect="dark" type="primary">
                                                    {{ vaccType.type }}
                                                    </el-tag>
                                                </span>
                                            </el-option>
                                        </el-select>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="6">
                                    <el-form-item label="疫苗提供商" label-width="85px">
                                        <el-input v-model="addForm.supplierName" style="width:170px;" disabled ></el-input>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="6">
                                    <el-form-item label="接种时间" label-width="85px">
                                        <el-input v-model="addForm.accountTime" style="width:170px;" disabled ></el-input>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                            <el-row>
                                <el-col :span="8">
                                    <div class="grid-content bg-purple-light">
                                        <el-form-item label="接种人性别" label-width="130px">
                                            <el-radio-group style="margin-left:10px" v-model="addForm.sex">
                                            <el-radio disabled :label="1">男</el-radio>
                                            <el-radio disabled :label="0">女</el-radio>
                                            </el-radio-group>
                                        </el-form-item>
                                    </div>
                                </el-col>
                                <el-col :span="9">
                                    <el-form-item label="接种人是否有过敏史" label-width="170px">
                                        <el-radio-group v-model="addForm.allergy">
                                            <el-radio disabled :label="true">有</el-radio>
                                            <el-radio disabled :label="false">无</el-radio>
                                        </el-radio-group>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="7">
                                    <el-form-item label="接种部位" label-width="130px">
                                        <el-input v-model="addForm.vaccSite" style="width:167px;" disabled></el-input>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                        </div>
                        <div class="addStyle">
                            <el-row>
                                <el-col :span="7" style="width:26.7%">
                                    <div class="grid-content bg-purple">
                                        <el-form-item label="记录时间">
                                            <el-date-picker
                                                    disabled
                                                    v-model="nowTime"
                                                    style="width:193px"
                                                    type="datetime"
                                                    placeholder="选择日期时间">
                                            </el-date-picker>
                                        </el-form-item>
                                    </div>
                                </el-col>
                                <el-col :span="7" style="width:25.2%">
                                    <div class="grid-content bg-purple-light">
                                        <el-form-item label="接种状况" label-width="80px" prop="observationDesc">
                                            <el-input v-model="addForm.observationDesc" clearable style="width:177px;"></el-input>
                                        </el-form-item>
                                    </div>
                                </el-col>
                                <el-col :span="7" style="width:24.5%">
                                    <div class="grid-content bg-purple-light">
                                        <el-form-item label="留观记录人" label-width="95px" prop="accountId">
                                            <el-select v-model="addForm.accountId" style=" width:152px;" clearable @clear="clearUserInfo" placeholder="请选择记录人">
                                                <el-option
                                                        v-for="systemUser in systemUserData"
                                                        :key="systemUser.id"
                                                        :label="systemUser.nickname"
                                                        :value="systemUser.id"
                                                        @click.native="getUserSelectChangeforAdd(systemUser)" >
                                                        <span style="float: left;">{{ systemUser.nickname }}</span>
                                                </el-option>
                                            </el-select>
                                        </el-form-item>
                                    </div>
                                </el-col>
                                <el-col :span="7" style="width:23.5%">
                                    <div class="grid-content bg-purple-light">
                                        <el-form-item label="所属部门" label-width="72px">
                                            <el-input v-model="tempSystemUser.departmentName" disabled style="width:167px;"></el-input>
                                        </el-form-item>
                                    </div>
                                </el-col>
                            </el-row>
                        </div>
                    </el-form>
                </span>
                <span slot="footer" style="text-align:center;" class="dialog-footer">
                    <el-button @click="addDialogVisible = false" style="margin-right:70px;width:180px">取 消</el-button>
                    <el-button @click="submitObserve" type="primary" style="margin-left:70px;width:180px">提 交</el-button>
                </span>
            </el-dialog>
        </el-card>
    </div>
</template>

<script>
    import moment from 'moment';
    import 'moment/locale/zh-cn'
    moment.locale('zh-cn');
    export default {
        data() {
            return {
                btnLoading: false,
                btnDisabled: false,
                loading:true,
                showDialogVisible: false,   // 展示接种信息是否显示
                addDialogVisible: false,   //  登记留观记录信息是否显示
                showAdvanceSearch: false,   // 高级搜索按钮是否展示
                total: 0, //总共多少条数据
                observesData: [], //表格数据
                needles:[1,2,3,4,5],  //预约的针数
                vaccDeg:[{id:1,label:"甲类"},{id:2,label:"乙类"},{id:3,label:"丙类"},{id:4,label:"丁类"}],  //疫苗等级
                vaccineTypes:[{id:1,type:"减毒活疫苗"},{id:2,type:"灭活疫苗"},{id:3,type:"基因重组疫苗"}],  //疫苗等级
                systemUserData:[],  //记录人列表
                queryMap: { 
                    pageNum: 1,
                    pageSize: 10,
                    realName:"",
                }, //查询对象
                queryAllMap:{
                    pageNum: 1,
                    pageSize: 10
                },
                showForm:{},  // 展示接种信息
                addForm:{},  // 添加前数据存放
                submitForm:{},
                tempVaccineInSite:{},
                tempSystemUser:{},  // 选择的记录人信息
                addTitle:"", // 添加接种疫苗title
                showTitle:"", // 展示接种信息title
                nowTime: new Date(),
                //添加验证
                addFormRules: {
                    accountId: [
                        { required: true, message: "请选择记录人信息", trigger: "change" }
                    ],
                    observationDesc: [
                        { required: true, message: "请填写接种人的留观状况信息", trigger: "blur" }
                    ],
                } //添加验证
            };
        },
        methods: {
            //搜索
            search() {
                this.queryMap.pageNum = 1;
                this.queryMap.reservationDate = moment(this.queryMap.reservationDate).format('YYYY-MM-DD')
                this.getObserveList();
                this.reset();
            },
            /**
             * 根据名字搜索全部预约信息
             */
            async searchByName(){
                const { data: res } = await this.$http.get("business/observe/findList", {
                    params: this.queryMap
                });
                if (res.code === 20000) {
                    this.total = res.data.total;
                    this.observesData = res.data.observesList;
                } else {
                    this.observesData =[];
                    return this.$message.error(res.message);
                }
            },
            /**
             * 搜索全部
             */
            async searchAll(){
                const { data: res } = await this.$http.get("business/observe/findList", {
                    params: this.queryAllMap
                });
                if (res.code === 20000) {
                    this.total = res.data.total;
                    this.observesData = res.data.observesList;
                } else {
                    this.observesData =[];
                    return this.$message.error(res.message);
                }
            },
            /**
             * 条件搜索
             */
            searchByConditions(){
                this.$refs.showFormRef.validate(valid => {
                    if (!valid) {
                        return;
                    } else {
                        this.queryMap.pageNum = 1;
                        this.queryMap.reservationDate = moment(this.queryMap.reservationDate).format('YYYY-MM-DD')
                        this.getObserveList();
                        this.showAdvanceSearch = false
                        this.reset();
                    }
                });
            },
            /**
             * 点击高级搜索按钮事件
             */
            clickAdvanceSearchBtn(){
                this.showAdvanceSearch = true;
            },
            /**
             * 关闭查看弹出框
             */
            closeshowDialog() {
                this.showForm = {};
            },
            /**
             * 点击选择记录人信息
             */
            getUserSelectChangeforAdd(systemUser){
                this.tempSystemUser = systemUser;
            },
            /**
             * 提交留观记录
             */
            submitObserve(){
                this.$refs.addFormRef.validate(async valid => {
                    if (!valid) {
                        return;
                    } else {
                        this.btnLoading = true
                        this.btnDisabled = true
                        // 向 submitForm 添加数据
                        this.submitForm.accountId = this.addForm.accountId
                        this.submitForm.vaccinatorId = this.addForm.vaccinatorId
                        this.submitForm.observationDesc = this.addForm.observationDesc
                        this.submitForm.vaccinationSiteId = this.addForm.vaccSiteId
                        this.submitForm.reservationId = this.addForm.reservationId
                        this.submitForm.injectionId = this.addForm.injectionId
                        this.submitForm.accountTime = moment(this.nowTime).format('YYYY-MM-DD HH:mm:ss');
                        // 发起请求
                        const { data: res } = await this.$http.post("business/observe/postFrom", this.submitForm);
                        if (res.success) {
                            this.getObserveList();
                            this.submitForm ={};
                        } else {
                            this.submitForm ={};
                            this.addDialogVisible = false;
                            return this.$message.error(res.message);
                        }
                        this.btnLoading = true
                        this.btnDisabled = true
                        this.addDialogVisible = false
                        this.submitForm = {};
                    }
                });
            },
            /**
             * 删除用户信息
             */
            clearUserInfo(){
                this.tempSystemUser = {};
            },
            /**
             * 关闭添加留观信息弹出框
             */
            closeAddDialog(){
                this.$refs.addFormRef.clearValidate();
                this.$refs.addFormRef.resetFields();
                this.addDialogVisible = false;
                this.addForm = {};
                this.submitForm = {};
                this.tempSystemUser = {};
            },
            /**
             * 重置
             */
            reset(){
                this.queryMap= {
                    pageNum: 1,
                    pageSize: 10,
                };
            },
            /**
             * 关闭高级搜索弹出框
             */
            closeAdvanceSearchDialog() {
                this.queryMap= {
                    pageNum: 1,
                    pageSize: 10,
                };
                this.$refs.showFormRef.clearValidate();
                this.$refs.showFormRef.resetFields();
            },
            /**
             * 获取所有记录人信息
             */
            async getAllSystemUser(){
                const { data: res } = await this.$http.get("system/users/findListToOther");
                if (res.code === 20000) {
                    this.systemUserData = res.data.result;
                } else {
                    this.systemUserData =[];
                    return this.$message.error(res.message);
                }
            },
            /**
             * 点击受理留观登记
             */
            async acceptRecord(id){
                const { data: res } = await this.$http.get("business/observe/get/" + id);
                if (res.code === 20000) {
                    this.addForm = res.data.result;
                    this.showTitle = "填写" +"【"+this.addForm.realName +"】"+"的留观记录"
                } else {
                    return this.$message.error(res.message);
                }
                this.addDialogVisible = true;
            },
            /**
             * 获取某一个接种信息
             */
            async showRecord(id){
                const { data: res } = await this.$http.get("business/observe/get/" + id);
                if (res.code === 20000) {
                    this.showForm = res.data.result;
                    this.showTitle = "查看" +"【"+this.showForm.realName +"】"+"的接种记录"
                } else {
                    return this.$message.error(res.message);
                }
                this.showDialogVisible = true;
            },
            /**
             * 加载所有已接种的列表
             */
            async getObserveList() {
                const { data: res } = await this.$http.get("business/observe/findList", {
                    params: this.queryMap
                });
                if (res.code === 20000) {
                    this.total = res.data.total;
                    this.observesData = res.data.observesList;
                } else {
                    this.observesData =[];
                    return this.$message.error(res.message);
                }
            },
            //改变页码
            handleSizeChange(newSize) {
                this.queryMap.pageSize = newSize;
                this.getObserveList();
            },
            //翻页
            handleCurrentChange(current) {
                this.queryMap.pageNum = current;
                this.getObserveList();
            },
            currentTime() {
                setInterval(this.getDate, 10);
            },
            getDate() {
                this.nowTime = new Date();
            },
        },
        mounted() {
            this.currentTime();
        },
        // 销毁定时器
        beforeDestroy: function () {
            if (this.getDate) {
                clearInterval(this.getDate); // 在Vue实例销毁前，清除时间定时器
            }
        },
        created() {
            this.getObserveList();
            this.getAllSystemUser();
            setTimeout(() => {
                this.loading = false;
            }, 500);
        }
    };
</script>

<style>
    .el-dialog__footer{
        text-align: center;
    }
    .addStyle{
        border: 1px solid #409eff;
        border-radius: 5px;
        box-sizing: border-box;
        padding-top: 10px;
        margin-bottom: 10px;
    } 
</style>